React

React Basics - 1

Theory

1. React is a JavaScript library for building user interfaces.

2. React is all about components.

   • components:
     1. Reusable piece of code.
     2. Custom HTML element 🤫.[For understanding, don't tell to interviewer]

3. javascript is based on imperative approach.

   • Imperative approach: A software development paradigm where functions are implicitly coded in every step required to solve a problem.

4. React is based on declarative approach.

   • Declarative approach: A method to abstract away the control flow for logic required for software to perform an action.

5. React follows SPA approch.

   • SPA (Single Page application): A web app implementation that loads only a single web document, and then updates the body content of that single document.
   • Example:
     1. Netflix

Why React?

React is a popular choice for building user interfaces due to several reasons:

1. Reusability: React components are modular and can be reused in different parts of an application, making development faster and more efficient.
2. DRY (Don't Repeat Yourself): React promotes the principle of DRY by encouraging developers to create reusable components that can be used throughout the application, reducing the amount of duplicate code.
3. Readability: React uses a declarative syntax, which makes code more readable and easier to understand. Developers can quickly understand what a component does and how it works by reading its code.
4. Separation of Code: React allows developers to separate concerns by keeping the UI and application logic separate. This separation of code makes it easier to maintain and modify the codebase.
5. Modularity: React allows developers to create independent and self-contained components, making it easier to test and maintain the code. This modularity also enables developers to work on different parts of the application independently, increasing the development speed and efficiency.

---

Setup

1. React Docs: https://reactjs.org/docs/getting-started.html
2. There are multiple ways
   1. Create APP: https://reactjs.org/docs/create-a-new-react-app.html
   2. Use Replit: https://replit.com/
   3. starter pack: https://github.com/thepranaygupta/html-tailwind-css-starter-pack

---

Important files

Sr.	File name
1	package.json	This file is the central configuration file for a React project. It lists all the dependencies and scripts that are required for the project to run. It is important because it allows developers to easily manage and update dependencies, add new dependencies, and configure scripts to run tasks like starting the development server, running tests, or building the production version of the app.
2	src/index.js	This file is the entry point for the React application. It is the first file that gets executed when the application is launched. It is important because it initializes the React app and renders the main component, usually the App component.
3	src/App.js	This file contains the main component of the React application. It is the root component that contains all the other components of the application. It is important because it defines the structure and logic of the application.
4	public/index.html	This file is the main HTML file of the React application. It is important because it provides the root element in which the React app will be rendered. It also allows developers to add meta tags, link to external stylesheets or scripts, and configure the title of the application.

---

React Basics - 2